<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>

<body>
	<div id="app">
		<h1>我叫{{name}},今年{{age}}岁，性别{{sex}}</h1>
		
		<span v-text="html2"></span>
		<span v-html="html2"></span>
		<p v-text="count"></p>
		<span>{{user.id}}</span>
		<span v-for="(name,index) in nameList">{{nameList[index]}}</span>
		<p v-for="user in userList" :key="user.id">{{user.id}} <span  v-on:click="delete(1)">删除</span></p>
		
		<button v-on:click="test" v-on:mouseover="test2">提交哦</button>
		<button @click="test3">提交3哦</button>
		
		
		
	</div>
</body>
	
</html>
<script src="../js/v2.6.10/vue.js"></script>	
<script>
	new Vue({
		el:"#app",
		data:{
			count:1,
			name:'hhl',
			age: 29,
			sex:'男',
			html2:'<h1>何海龙</h1>',
			user:{id:1,name:'何海龙',age:28},
			nameList:['张三','李四','王五'],
			userList:[
				{id:1,name:'何海龙',age:28},
				{id:2,name:'何海龙2',age:28},
				{id:3,name:'何海龙4',age:28}
			]
		},
		methods: {
			test : function() {
				// alert('111');
				this.count++;
			},
			test2 : function() {
				console.log('222');
				console.log(this)
			},
			test3(){
				alert(3)
			},
			delete: function(id){
				alert(id)
			}
		}
		
	});
	
	
</script>
<!--
	1.一个页面中只能存在一个Vue实例，不能创建多个vue实例
	2.vue实例中el属性代表vue实例的作用范围
-->